<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/11/25
  Time: 16:41
  To change this template use File | Settings | File Templates.
--%>
<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2018/7/17
  Time: 15:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div class="container">

    <link rel="stylesheet" type="text/css" href="/static/webuploader/webuploader.css" />
    <link rel="stylesheet" type="text/css" href="/static/webuploader/style.css" />


    <div id="wrapper" style="margin: 1em;width: auto;">
        <div id="fileContainer">
            <!--头部，相册选择和格式选择-->

            <div id="uploader" style="">
                <div class="queueList" style="text-align: center;margin: 20px;">

                    <div id="dndArea" class="placeholder" style="border: 3px dashed #e6e6e6;min-height: 238px;padding-top: 70px;">
                        <div>
                            <img id="selectFileImg" src="/static/webuploader/img/image.png" title="点击选择图片" alt="点击选择图片"/>
                        </div>
                        <div id="filePickerpicker" style="margin: 0 auto;">点击选择图片</div>
                        <p style="color: #cccccc;margin: 0;padding: 0;border: none;outline: 0;font-size: 100%;font: inherit;vertical-align: baseline;">或将照片拖到这里，单次最多可选300张</p>
                    </div>
                </div>
                <div class="statusBar" style="display:none;">
                    <div class="progress">
                        <span class="text">0%</span>
                        <span class="percentage"></span>
                    </div><div class="info"></div>
                    <div class="btns">
                        <div id="filePicker2"></div>
                        <div class="uploadBtn">开始上传</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="uploaders" class="wu-example">
        <!--用来存放文件信息-->
        <div id="thelist" class="uploader-list"></div>
        <div class="btns">
            <div id="picker">选择文件</div>
            <button id="ctlBtn" class="btn btn-default">开始上传</button>
            <button id="selectFileBtn" class="btn btn-default">选择文件（PS2）</button>
        </div>
    </div>
    <script src="/static/webuploader/webuploader.js"></script>
    <%--<script type="text/javascript" src="/static/webuploader/upload.js"></script>--%>
    <script type="application/javascript">
        var $ = jQuery,
            $list = $('#thelist'),
            $btn = $('#ctlBtn'),
            state = 'pending',
            uploader;

        // 初始化WebUploader
        uploader = WebUploader.create({
            auto:false,
            // 指定Drag And Drop拖拽的容器，如果不指定，则不启动
            dnd: '#dndArea',
            // 指定监听paste事件的容器，如果不指定，不启用此功能。此功能为通过粘贴来添加截屏的图片。建议设置为document.body.
            paste: '#uploader',
            pick: {
                id:'#filePickerpicker',
                multiple: true
            },
            // swf文件路径
            swf: '/static/webuploader/Uploader.swf',
            // 文件接收服务端。
            server: '/admin/activity/mediaLibrary/uploadFilew',
            //压缩图片，如果图片尺寸超过设置的尺寸，会自动压缩图片，必要时会裁剪
            compress:{
                width: 600,
                height: 600,

                // 图片质量，只有type为`image/jpeg`的时候才有效。
                quality: 90,

                // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
                allowMagnify: false,

                // 是否允许裁剪
                crop: false,

                // 是否保留头部meta信息。
                preserveHeaders: true,

                // 如果发现压缩后文件大小比原来还大，则使用原来图片
                // 此属性可能会影响图片自动纠正功能
                noCompressIfLarger: false
            },
            // 单位字节，如果图片大小小于此值，不会采用压缩。512k  512*1024，如果设置为0，原图尺寸大于设置的尺寸就会压缩；如果大于0，只有在原图尺寸大于设置的尺寸，并且图片大小大于此值，才会压缩
            compressSize: 0,
            fileNumLimit : 10,//验证文件总数量, 超出则不允许加入队列,默认值：undefined,如果不配置，则不限制数量
            fileSizeLimit : 100*1024*1024*1024, //1kb=1024*1024,验证文件总大小是否超出限制, 超出则不允许加入队列。
            fileSingleSizeLimit :10*1024*1024*1024, //验证单个文件大小是否超出限制, 超出则不允许加入队列。
            chunked:true,//是否开启分片上传
            threads:3,
            chunkSize:5*1024*1024,//如果要分片，每一片的文件大小
            prepareNextFile:false//在上传当前文件时，准备好下一个文件,请设置成false，不然开启文件多选你浏览器会卡死
        });

        // 拖拽时不接受 js, txt 文件。
        uploader.on( 'dndAccept', function( items ) {
            var denied = false,
                len = items.length,
                i = 0,
                // 修改js类型
                unAllowed = 'text/plain;application/javascript ';

            for ( ; i < len; i++ ) {
                // 如果在列表里面
                if ( ~unAllowed.indexOf( items[ i ].type ) ) {
                    denied = true;
                    break;
                }
            }

            return !denied;
        });

        uploader.on('dialogOpen', function() {
            console.log('dialogOpen here');
        });

        // 添加“添加文件”的按钮，
        uploader.addButton({
            id: '#filePicker2',
            label: '继续添加'
        });

        uploader.on('ready', function() {
            window.uploader = uploader;
        });

















        // 当有文件添加进来的时候
        uploader.on( 'fileQueued', function( file ) {
            $list.append( '<div id="' + file.id + '" class="item">' +
                '<h4 class="info">' + file.name + '</h4>' +
                '<p class="state">等待上传...</p>' +
                '</div>' );
        });

        // 文件上传过程中创建进度条实时显示。
        uploader.on( 'uploadProgress', function( file, percentage ) {
            var $li = $( '#'+file.id ),
                $percent = $li.find('.progress .progress-bar');

            // 避免重复创建
            if ( !$percent.length ) {
                $percent = $('<div class="progress progress-striped active">' +
                    '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                    '</div>' +
                    '</div>').appendTo( $li ).find('.progress-bar');
            }

            $li.find('p.state').text('上传中');

            $percent.css( 'width', percentage * 100 + '%' );
        });

        uploader.on( 'uploadSuccess', function( file ) {
            $( '#'+file.id ).find('p.state').text('已上传');
        });

        uploader.on( 'uploadError', function( file ) {
            $( '#'+file.id ).find('p.state').text('上传出错');
        });

        uploader.on( 'uploadComplete', function( file ) {
            $( '#'+file.id ).find('.progress').fadeOut();
        });

        uploader.on( 'all', function( type ) {
            if ( type === 'startUpload' ) {
                state = 'uploading';
            } else if ( type === 'stopUpload' ) {
                state = 'paused';
            } else if ( type === 'uploadFinished' ) {
                state = 'done';
            }

            if ( state === 'uploading' ) {
                $btn.text('暂停上传');
            } else {
                $btn.text('开始上传');
            }
        });

        $btn.on( 'click', function() {
            if ( state === 'uploading' ) {
                uploader.stop();
            } else {
                uploader.upload();
            }
        });

        $('#selectFileBtn').on('click', function(){
            $('input[type=file]').click();
        });
        $('#selectFileImg').on('click', function () {
            $('input[type=file]').click();
        });
    </script>
</div>